import React, {Component} from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {connect} from 'react-redux'

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import PopularBottom from "../pages/bottom/PopularBottom";
import TrendingBottom from "../pages/bottom/TrendingBottom";
import FavoriteBottom from "../pages/bottom/FavoriteBottom";
import MyBottom from "../pages/bottom/MyBottom";
import FetchDemo from "../pages/bottom/FetchDemo";

const Tab = createBottomTabNavigator();

// 首页底部导航栏，默认显示PopularPage页
class MyBottomNavigation extends Component {
  render() {
    let {theme} = this.props;
    return (
      <Tab.Navigator tabBarOptions={{activeTintColor:theme}}>
        <Tab.Screen name="MyPage" component={MyBottom} options={{
          tabBarLabel: '我的',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name='person' size={size} color={color}/>
          ),
        }}/>

        <Tab.Screen name="PopularPage" component={PopularBottom} options={{
          tabBarLabel: '最热',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name='bonfire' size={size} color={color}/>
          ),
        }}/>

        <Tab.Screen name="TrendingPage" component={TrendingBottom} options={{
          tabBarLabel: '趋势',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name='md-trending-up' size={size} color={color}/>
          ),
        }}/>

        <Tab.Screen name="FavoritePage" component={FavoriteBottom} options={{
          tabBarLabel: '收藏',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name='heart' size={size} color={color}/>
          ),
        }}/>
      </Tab.Navigator>
    );
  }
}

export default connect(
  state => ({theme: state.theme.theme}),
)(MyBottomNavigation)